<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Background Size Example</title>  
<style>  
  .box {  
    width: 300px;  
    height: 200px;  
    border: 1px solid #000;  
    margin: 10px;  
    float: left;  
    background-repeat: no-repeat;  
  }  
  
  .box1 {  
    background-image: url('tx1.jpg'); /* 替换为你的图像URL */  
    background-size: contain;  
  }  
  
  .box2 {  
    background-image: url('tx1.jpg'); /* 替换为你的图像URL */  
    background-size: cover;  
  }  
  
  .box3 {  
    background-image: url('tx1.jpg'); /* 替换为你的图像URL */  
    background-size: 100px 100px; /* 显式设置宽度和高度 宽 高 原点（左上角） */  
  }  
  
  .box4 {  
    background-image: url('tx1.jpg'); /* 替换为你的图像URL */  
    background-size: 100% 100%; /* 使用百分比设置 宽 高 */  
  }  
</style>  
</head>  
<body>  
  
<div class="box box1">Contain</div>  
<div class="box box2">Cover</div>  
<div class="box box3">Explicit Size</div>  
<div class="box box4">Percentage Size</div>  
  
</body>  
</html>